{extend name="../../../view/public/base" /}

{block name="css"}
<style>
    .height_full {
        height: 100%;
    }

    .detail_header {
        height: 200px;
        padding: 20px;
        border: 1px solid #eaeef1;
    }

    .detail_header_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .detail_header_title {
        height: 50px;
        padding: 5px;
        font-size: 30px;
        color: #3d464d;
    }

    .detail_header_types {
        height: 50px;
        padding: 5px
    }

    .detail_header_desc {
        height: 110px;
        padding: 5px
    }

    .detail_info {
        height: 250px;
        padding: 20px 30px;
        border-left: 1px solid #eaeef1;
        border-right: 1px solid #eaeef1;
    }

    .detail_style {
        height: 350px;
        padding: 20px 30px;
        border-left: 1px solid #eaeef1;
        border-right: 1px solid #eaeef1;
    }

    .detail_content {
        padding: 20px 30px;
        border-left: 1px solid #eaeef1;
        border-right: 1px solid #eaeef1;
        border-bottom: 1px solid #eaeef1;
    }
</style>
{/block}

{block name="body"}
<div class="bw-container">
    <div class="bw-main">
<div id="detail" style="padding: 20px;">
    <div class="layui-row">
        <div class="layui-col-md12 detail_header">
            <div class="layui-row height_full">
                <div class="layui-col-md2 height_full" style="padding: 10px">
                    <img src="{$detail.logo_image}"
                         onerror="javascript:this.src='/uploads/image/20200610/0a6862121a7ff89566319b54ee30f615.png'"
                         alt="">
                </div>
                <div class="layui-col-md10 height_full">
                    <div class="layui-row">
                        <div class="layui-col-md8 detail_header_title">
                            {$detail.title}
                        </div>
                        <div class="layui-col-md4 detail_header_types">
                            {if(false !== strpos($detail['types'], 'mini_program'))}<span class='layui-badge' style="margin-left: 2px;">小程序</span>{/if}
                            {if(false !== strpos($detail['types'], 'app'))}<span class='layui-badge' style="margin-left: 2px;">APP</span>{/if}
                            {if(false !== strpos($detail['types'], 'h5'))}<span class='layui-badge' style="margin-left: 2px;">h5</span>{/if}
                            {if(false !== strpos($detail['types'], 'official'))}<span class='layui-badge' style="margin-left: 2px;">公众号</span>{/if}
                            {if(false !== strpos($detail['types'], 'system'))}<span class='layui-badge' style="margin-left: 2px;">系统</span>{/if}
                        </div>
                        <div class="layui-col-md12 detail_header_desc">
                            {$detail.describe}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 detail_info">
            <div class="layui-row height_full">
                <div class="layui-col-md10 height_full">
                    <blockquote class="layui-elem-quote">{$detail.title} 应用信息</blockquote>
                    <div style="line-height: 28px">
                        <p><label class="layui-word-aux">开通价格：</label>￥<span style="font-size: 20px">{$detail.sell_price}</span>
                        </p>
                        <p><label class="layui-word-aux">当前版本：</label>{$detail.version}</p>
                        <p><label class="layui-word-aux">更新时间：</label>{$detail.update_time | date="Y-m-d"}</p>
                        <!--                        <p><label class="layui-word-aux">体验天数：</label>{$detail.expire_day}</p>-->
<!--                        <p><label class="layui-word-aux">有效天数：</label>{$detail.expire_day}</p>-->
<!--                        <p><label class="layui-word-aux">功能：</label>TODO 展示所有功能,可一并购买</p>-->

                        <p><label class="layui-word-aux">立即购买：</label>
                            <!--<button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                                    onclick="buy({$baseModule.id}, {$baseModule.type})"><i
                                    class="layui-icon layui-icon-cart"></i>立即购买
                            </button>-->
                            <button type="button" class="layui-btn layui-btn-warm layui-btn-sm"
                                    onclick="goModule()"><i
                                    class="layui-icon layui-icon-cart"></i>立即购买
                            </button>
                        </p>
                    </div>
                </div>
                {if(!empty($detail['qrcode_image']))}
                <div class="layui-col-md2 height_full">
                    <div style="padding: 10px 40px;border: 1px solid #eaeef1">
                        <img class="detail_header_img" src="{$detail.qrcode_image}">
                        <p class="layui-word-aux" style="text-align:center">微信扫码体验</p>
                    </div>
                </div>
                {/if}
            </div>
        </div>
        {if(!empty($detail['style_images']))}
        <div class="layui-col-md12 detail_style">
            <blockquote class="layui-elem-quote">{$detail.title} 应用截图</blockquote>
            <div style="display: flex">
                {foreach :explode(',', $detail['style_images']) as $vo }
                <img src="{$vo}" style="height: 250px;padding: 5px;">
                {/foreach}
            </div>
        </div>
        {/if}
        {if(!empty($detail['content']))}
        <div class="layui-col-md12 detail_content">
            <blockquote class="layui-elem-quote">{$detail.title} 应用介绍</blockquote>
            {$detail.content | raw}
        </div>
        {/if}
    </div>
</div>
<div id="module" class="layui-form layui-hide" style="width: 100%;">

    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm"
            onclick="goDetail()"><i
            class="layui-icon layui-icon-return"></i>返回
    </button>
    <table class="layui-table">
        <colgroup>
            <col width="10%">
            <col width="20%">
            <col width="20%">
            <col width="10%">
            <col width="10%">
            <col width="30%">
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>功能名称</th>
            <th>功能类型</th>
            <th>价格</th>
            <th>有效时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {foreach $miniappModules as $key=>$vo }
        <tr>
            <td>{$vo.id}</td>
            <td>{$vo.name}</td>
            <td>
                {if($vo.type == 1)}
                基础功能
                {elseif($vo.type == 2)}
                附加功能
                {elseif($vo.type == 3)}
                插件功能
                {/if}
            </td>
            <td>
                {if($vo.type == 3)}
                -
                {else}
                {$vo.price}
                {/if}
            </td>
            <td>{$vo.valid_days}</td>
            <td>
                {if($vo.type == 3)}
                {$vo.has_buy === 0 ? '<button type="button" class="layui-btn layui-btn-disabled layui-btn-sm">请前往插件市场购买</button>' : '<button type="button" class="layui-btn layui-btn-disabled layui-btn-sm">已购买</button>'}
                {else}
                {$vo.has_buy === 0 ? '<button type="button" class="layui-btn layui-btn-warm layui-btn-sm" onclick="buy(' .$vo.id.', '.$vo.type. ')">购买</button>' : '<button type="button" class="layui-btn layui-btn-disabled layui-btn-sm">已购买</button>'}
                {/if}
            </td>
        </tr>
        {/foreach}
        </tbody>
    </table>
</div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    var layer, bwajax;

    layui.use(['layer', 'bwajax'], function () {
        layer = layui.layer;
        bwajax = layui.bwajax.instance();
    })

    function goModule(){
        $('#detail').addClass('layui-hide');
        $('#module').removeClass('layui-hide');
    }
    function goDetail(){
        $('#detail').removeClass('layui-hide');
        $('#module').addClass('layui-hide');
    }

    function buy(id, type) {

        if(type == 1) var content = "<input id='name' type=\"text\" placeholder=\"请输入自定义应用名称\" class=\"layui-input\">" +
            "<input id='paypwd' type=\"password\" placeholder=\"请输入6位数字支付密码\" class=\"layui-input\">";
        else var content = "<input id='paypwd' type=\"password\" placeholder=\"请输入6位数字支付密码\" class=\"layui-input\">";

        layer.open({
            title: '确认购买',
            type: 1,
            area: ['300px', '180px'],
            closeBtn: 0,
            content: content
            ,shadeClose: true
            ,btn: ['支付']
            , btnAlign: 'c' //按钮居中
            ,yes: function(index, layero){
                var paypwd = $('#paypwd').val();
                var  pattern = /\d{6}/;
                if(!paypwd || !pattern.test(paypwd)) {
                    layer.msg('请输入6位数字密码', {icon: 2, time:1000});
                    return;
                }

                var name = $('#name').val();
                if(type == 1 && !paypwd) {
                    layer.msg('请填写应用名称', {icon: 2, time:1000});
                    return;
                }

                var data = {
                    id: id,
                    paypwd: paypwd,
                    name: name,
                };

                bwajax.post("{:Url('/manage/member/miniapp/buy')}", data)
                    .then(function (response) {
                        if (response.data.data.errcode === 0) {
                            layer.msg('购买成功', {icon: 1}, function () {
                                location.reload();//功能购买成功后刷新应用详情页面
                            });
                        } else layer.msg(response.data.msg, {icon: 2});
                    })
                layer.close(index);
            }
        });
    }
</script>
{/block}